<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>老虎机</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<style>
#cnt{border:1px solid #999;}
.item{width:98px;height:98px;border:1px solid #999;line-height:100px;font-size:30px;text-align: center;float:left;background:#ccc;color: #fff;font-weight: 700;}
.item.cur{background:#fff;color: #333;}
</style>
</head>
<body>
	<div style="display:inline-block;text-align: center;">
		<div id="cnt"></div>
		<button style="padding:5px 20px;margin-top:30px;" id="start"> 开 始 </button>
	</div>
	<audio id="music">
    <source = src="ding.mp3" type="audio/mp3" />
   </audio>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	var myrow = 7;
	show_item(myrow);
	function show_item(row){
		$('#cnt').css('width',row * 100 - (row - 1)*2);
		var total = row * 4 - 4;
		
		var html = '';
		var t1 = 3 * (row - 1);
		var mr = (row - 2) * 100 - (row - 2) * 2;
		for(var i = 1;i <= total;i++){
			var cur = 'cur';
			if(i != 1){
				cur = '';
			}
			var index = change(row,i);
			if((i - row) % 2 == 1 && i != t1 && i < t1){
				html += '<div class="item item-'+index+' '+cur+'" data-index="'+index+'" style="margin-right:'+mr+'px">'+index+'</div>';
			}else{
				html += '<div class="item item-'+index+' '+cur+'" data-index="'+index+'">'+index+'</div>';
			}
		}
		html += '<div style="clear:both"></div>';
		$('#cnt').html(html);
		
		$('#start').click(function(){
			//自动显示flash封面
			var num = Math.random()*total;
			num = parseInt(num, 10) + total*4;
			var index = 1;
			var start = parseInt($('.item.cur').attr('data-index'));

			item_action(start,num,0);
		});
	}
	
	function show_next(index){
		var index = index + 1;
		if(index > myrow * 4 - 4){
			index = 1;
		}
		console.log(index);
		$('.cur').removeClass('cur');
		$('.item-'+index).addClass('cur');
		return index;
	}
	var audio = document.getElementById("music");
		
	function item_action(start,total,cur){
		var time = [700,500,250,125,100,50];
		start = show_next(start); //返回的是下一个index
		var t = 50;
		if(cur < time.length){
			t = time[cur];
		}else if(total - cur < time.length){
			t = time[total-cur];
		}else{
			t = 50
		}
		//播放(继续播放)
		//audio.play();
		
		if(total > cur){
			setTimeout(function(){
				//停止
				//audio.pause();
				item_action(start,total,++cur);
			},t);
		}else{
			setTimeout(function(){
				alert('当前中奖数：'+$('.cur').attr('data-index'));
			},500);
		}
　		
　　
	}
	
	function change(row,i){
		var total = row * 4 - 4;
		var t1 = 1;
		var t2 = row;
		var t3 = 3*(row - 1);
		var t4 = 2*row -1;
		
		var t = 0;
		if(i <= row){
			t = i;
		}
		else if(i > row && i < t3){
			if(i % 2 == (row + 1)%2){
				t = total - (i - row - 1) / 2;
			}else{
				t = row + (i - row) / 2;
			}
		}else{
			t = t4 - (i - total);
		}
		return t;
	}

</script>
</body>
</html>